<template>
    <div class="view">
        <div class="page-statistics scrollRow">
            <template>
                <u-scrollRow :list="classList" label="sstClassName" match="classId" v-model="selClass" @change="classChange"></u-scrollRow>
            </template>
            <div class="m-con">
				<div class="vTabs_statistics">
					<div :class="['tab-nav',{'on': choosed == 1}]" @click="choosed = 1">必背古诗</div>
					<div :class="['tab-nav',{'on': choosed == 2}]" @click="choosed = 2">选背古诗</div>
				</div>
				<div class="poetyList">
					<div class="listTitle">
						<div class="title">标题</div>
						<div class="score">平均分</div>
						<div class="num">已背人数</div>
					</div>
				</div>
				<div class="list">
					<div class="list-item" v-for="(item,index) in infoList" :key="index" @click="jumpNextList(item)">
						<div class="title">《{{item.name}}》</div>
						<div class="score">{{item.average}}</div>
						<div class="num">{{item.count}}人</div>
					</div>
				</div>
                <div class="vTips_empty" v-if="!infoList || !infoList.length">暂无数据</div>
            </div>
        </div>
    </div>
</template>

<script>
import * as api from '@/api/index';
export default {
	data(){
		return {
			choosed:1, //1必背古诗 2课外古诗
			userInfo: JSON.parse(localStorage.getItem("userInfo")),	
			classList:[], //教师执教的班级列表
			selClass: {},				//所选class信息
			
			infoList:[],  //当前展示的列表
			bibeiList:[], //必背古诗列表
			kewaiList:[], //课外古诗列表,

			classId:'', //选中的班级id
			className:''//选中的班级名称
		}
	},
	created(){
		this.getInit()		
	},
	watch:{
		choosed(val){
			this.infoList = val==1?this.bibeiList:this.kewaiList	
			if(!this.infoList.length){
				this.getPoetryAverageScoreByClass()
			}
		}
	},
	methods: {
		getInit(){
			const { classList } = this.userInfo
			this.classList = classList&&classList.length? classList: []
			var choseClassId = sessionStorage.getItem('choseClassId')
			this.selClass = choseClassId?this.classList.find(item => {return item.classId == choseClassId}):this.classList[0]
			
			this.getPoetryAverageScoreByClass()
		},
		classChange(){
			this.bibeiList=[]
			this.kewaiList=[]
			this.getPoetryAverageScoreByClass()
		},
		/******
		 * 统计班级用户诗词平均分
		 * readType: 1: 必背  2：选背
		 * ****/ 
		async getPoetryAverageScoreByClass(){
			var data={
				classId: this.selClass.classId,
				futureId: this.userInfo.futureId,
				readType:this.choosed
			}
			var res=await api.getPoetryAverageScoreByClass(data)
			if(res.resultCode==1){
				if(this.choosed==1){
					this.bibeiList=res.value?res.value:[]
					this.infoList=this.bibeiList
				}
				else{
					this.kewaiList=res.value?res.value:[]
					this.infoList=this.kewaiList
				}
			}
		},
		jumpNextList(item){
			let info ={
				classId:this.selClass.classId,
				poetryId :item.poetryId,
				futureId:this.userInfo.futureId,
				className:this.selClass.sstClassName,
				type:this.choosed //诗词类型
			}
			sessionStorage.setItem("poetyInfo",JSON.stringify(info))
			this.$router.push({ path: '/poetry/poetyDetail'})
		},
	},
}
</script>
<style lang="scss" scoped>
.page-statistics .m-con{
	overflow: hidden;
}
.poetyList{
	.listTitle{
		display: flex;
		height: 1rem;
		line-height: 1rem;
		font-size: .3rem;
		color: #333333;
		border-bottom: .05rem dotted #e6eedb;
		.title{
			width: 3.6rem;
			padding-left: .2rem;
		}
		.score{
			width: 1.1rem;
		}
		.num{
			flex: 1;
			text-align: right;
			padding-right: .2rem;
		}

	}
	
}
.list{
	flex: 1;
	overflow-y: auto;
	.list-item{
		display: flex;
		height: 1rem;
		line-height: 1rem;
		font-size: .32rem;
		color: #333333;
		.title{
			width: 3.6rem;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		.score{
			width: 1.1rem;
		}
		.num{
			flex: 1;
			position: relative;
			text-align: right;
			padding-right: .6rem;
			&::after{
				content: '';
				position: absolute;
				top: .35rem; right: .2rem;
				width: .25rem; height: .3rem;
				background: url(~@/assets/img/icon/arrow_right_light.png) no-repeat 0 center;
				background-size: 100%;
			}
		}
	}
}
</style>